<template>
  <div>
    <MyTagVue>
      <template #top>
        <div class="top1">
          <p>本周热搜top5</p>
        </div>
      </template>
      <template #content>
        <div class="item" v-for="(item, index) in list2" :key="index">
          <div class="top">
            <p class="name">{{ item.name }}</p>
            <p class="guanzhu">{{ item.number }}</p>
          </div>
        </div>
      </template>
    </MyTagVue>
    <MyTagVue>
      <template #top>
        <div class="top1">
          <p>可能感兴趣的人</p>
          <span>换一批</span>
        </div>
      </template>
      <template #content>
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="top">
            <p class="name">{{ item.name }} {{ item.sex }} {{ item.age }}岁</p>
            <p class="guanzhu">关注</p>
          </div>
          <p>研究领域:{{ item.zhuanye }}</p>
          <p>哈尔滨工业大学 - {{ item.xueli }}</p>
        </div>
      </template>
    </MyTagVue>
  </div>
</template>

<script>
import MyTagVue from './components/MyTag.vue'
export default {
  data() {
    return {
      list: [
        {
          name: '李国盛',
          sex: '男',
          age: 25,
          zhuanye: '机电一体化技术',
          xueli: '教授'
        },
        {
          name: '陈艳',
          sex: '女',
          age: 29,
          zhuanye: '计算机编程',
          xueli: '硕士'
        }
      ],
      list2: [
        {
          name: '区块链',
          number: 55
        },
        {
          name: '无人机',
          number: 32
        },
        {
          name: '人工智能',
          number: 32
        },
        {
          name: '生命科学',
          number: 46
        },
        {
          name: '传感器',
          number: 64
        }
      ]
    }
  },
  components: {
    MyTagVue
  }
}
</script>

<style>
body {
  background-color: gainsboro;
}
</style>
